{% load staticfiles thumbnail %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{% block title %}乐乎在线{% endblock title %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">


    <link rel="icon" href="{% static 'images/favicons/favicon.ico' %}">
    <link href="{% static 'bootstrap-4.3.1-dist/css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet">
    {% block css %}{% endblock %}

</head>

<body>

<div class="mb-4">
    <nav class="navbar navbar-expand-md navbar-light bg-light">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">乐乎在线</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item" id="home">
                    <a class="nav-link" href="#">首 页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item" id="news">
                    <a class="nav-link" href="#">书籍</a>
                </li>
                <li class="nav-item" id="blogs">
                    <a class="nav-link" href="#">出版社</a>
                </li>
                <li class="nav-item" id="quora">
                    <a class="nav-link" href="#">读书笔记</a>
                </li>
                <li class="nav-item" id="chat">
                    <a class="nav-link" href="#">图集</a>
                </li>
                {% if request.user.is_authenticated %}
                    <li class="nav-item" id="users">
                        {# URL provided by django-allauth/account/urls.py #}
                        <a id="sign-up-link" class="nav-link"
                           href="{% url 'users:detail' request.user.username %}">
                            {% thumbnail request.user.avatar "x25" as im %}
                                <img src="{{ im.url }}" style="border-radius: 50%;" alt="用户头像" class="user-image">
                            {% empty %}
                                <img src="{% static 'images/user.png' %}" height="25px" alt="没有头像"/>
                            {% endthumbnail %}
                            {#                            <img src="{{ MEDIA_URL }}{{ request.user.avatar }}" style="height: 25px;width: 25px"/>#}
                        </a>
                    </li>
                    <li class="nav-item" id="logout">
                        {# URL provided by django-allauth/account/urls.py #}
                        <a id="sign-up-link" class="nav-link"
                           href="{% url 'account_logout' %}">退出</a>
                    </li>
                {% else %}
                    <li class="nav-item" id="signup">
                        {# URL provided by django-allauth/account/urls.py #}
                        <a id="sign-up-link" class="nav-link"
                           href="{% url 'account_signup' %}">注 册</a>
                    </li>
                    <li class="nav-item" id="login">
                        {# URL provided by django-allauth/account/urls.py #}
                        <a id="log-in-link" class="nav-link" href="{% url 'account_login' %}">登 录</a>
                    </li>
                {% endif %}
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
</div>

<div class="container">

    {% if messages %}
        {% for message in messages %}
            <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
        {% endfor %}
    {% endif %}

    {% block content %}
        <p>Use this document as a way to quick start any new project.</p>
    {% endblock content %}

</div> <!-- /container -->

{% block modal %}{% endblock modal %}

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'bootstrap-4.3.1-dist/js/bootstrap.bundle.js' %}"></script>
{% block javascript %}{% endblock %}
</body>
</html>
 
